import React, {useState,useEffect} from 'react'
import Pagecomponent from './Pagecomponent';
import './Posts.css'
import {changeTime} from './tool';

var pageNum;
const Posts = () => {
    const [dataList, setDataList] = useState([]);
    const [totalPage, setTotalPage] = useState(15);
    const [posts,setPosts] = useState([]);
    useEffect(()=>{
        fetch(`https://api.124ss.xyz:2355/endsquare?rand=$11`,{
          method: "GET",
          mode: "cors",
          headers: {
            "Content-Type": "text/plain"
          }
    
        }).then(res => {
          return res.json();
        })
        .then(res =>{
            var arr = [];
            var postsObj = [];
            res.forEach((item,index) => {
              console.log(item)
              postsObj = [
                item['posts_text'],
                item['posts_image'],
                item['posts_time'],
                item['open_id'],
                item['posts_id']
              ]
              arr.push(postsObj)
            });
            setPosts(arr)
            console.log(arr)
        })
        .catch((err)=>{
          console.log("err:",err);
        })
      },[])

      const getCurrentPage = (currentPage) => {
        setDataList(posts[currentPage-1])
        pageNum = currentPage;
      }

      const DelItem = (idx,item) => {
        fetch(`https://api.124ss.xyz:2355/enddelPosts/${item[4]}`,{
          method: "delete",
          mode: "cors",
          headers: {
            "Content-Type": "text/plain"
          },
          body: JSON.stringify({
            posts_id: item[4]
          })
    
        }).then(res => {
          return res.text();
        })
        .then(res =>{
          console.log(res)
        } )
        .catch((err)=>{
          console.log("err:",err);
        })
        
        let newPosts = posts.filter((_,index)=>idx!=index);
        setPosts(newPosts);
    
      }


    return (
        <div>
          <div id="nav">
            <p style={{fontFamily: 'SimSun'}}>论坛管理</p>
          </div>
          <table>
            <thead>
              <tr>
                <th style={{paddingLeft: 150, fontSize: 25, fontFamily: 'SimSun'}}>帖子内容</th>
                <th style={{paddingLeft: 60, fontSize: 25, fontFamily: 'SimSun'}}>发帖时间</th>
                <th style={{paddingLeft: 60, fontSize: 25, fontFamily: 'SimSun'}}>OPENID</th>
                <th style={{paddingLeft: 60, fontSize: 25, fontFamily: 'SimSun'}}>操作</th>
              </tr>
            </thead>
            <tbody>
              {
                posts.slice(10*(pageNum-1),10*pageNum).map((item, index) =>
                  <tr >
                    <td style={{paddingTop: 20,paddingLeft: 150, textAlign: 'center',fontFamily: 'KaiTi'}}>
                      {item[0]}
                    </td>
                    <td style={{paddingTop: 20,paddingLeft: 60, textAlign: 'center'}}>{changeTime(Number(item[2]))}</td>
                    <td style={{paddingTop: 20,paddingLeft: 60, textAlign: 'center'}}>{item[3]}</td>
                    <td style={{paddingTop: 20,paddingLeft: 60, textAlign: 'center'}}>
                      <button onClick={() => DelItem(index,item)}>
                        删除
                      </button>
                    </td>
                  </tr>)
              }
            </tbody>
          </table>
        <div style={{position: 'absolute', bottom: 15, left:510}}>
          <Pagecomponent totalPage={totalPage} pageCallbackFn={getCurrentPage}/>
        </div>
      </div>
    )
}

export default Posts
